<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      lang="zh-CN"
      xmlns:th="http://www.thymeleaf.org"
      xmlns="http://www.w3.org/1999/xhtml" layout:decorate="~{layout/template}">
<head>
    <title>应用监控详情</title>
    <link rel="stylesheet" href="/css/operations/appMonitor.css"/>
</head>
<body>
<div id="contentContainer" layout:fragment="content" class="contentContainer" v-cloak>

    <el-row th:if="${monitorInfo==null}">
        <el-alert
                type="warning"
                title="提示"
                description="未查询到应用监控信息"
                show-icon
                :closable="false">
        </el-alert>
    </el-row>

    <el-row>
        <el-col :span="4">
            <el-card>
                <div slot="header">
                    <span>MySQL数据库</span>
                </div>
                <div>
                    <div th:class="${monitorInfo.get('dbStatus')=='正常'}?'normalText':'dangerText'">
                        <i th:class="${monitorInfo.get('dbStatus')=='正常'}?'el-icon-circle-check':'fa fa-exclamation-circle'"></i>
                        <span th:text="${monitorInfo.get('dbStatus')}">
                        </span>
                    </div>
                </div>
            </el-card>
        </el-col>

        <el-col :offset="1" :span="7">
            <el-card>
                <div slot="header">
                    <span>磁盘</span>
                </div>
                <div>
                    <el-progress type="circle"
                                 th:attr="percentage=${monitorInfo.get('diskSpaceUsageRate')}"
                                 stroke-width="12"
                                 width="120">
                    </el-progress>
                    <div class="cardContent">
                        <table>
                            <tr>
                                <td>总</td>
                                <td th:text="${monitorInfo.get('diskSpaceTotal')}"></td>
                            </tr>
                            <tr>
                                <td>已用</td>
                                <td th:text="${monitorInfo.get('diskSpaceUsage')}"></td>
                            </tr>
                            <tr>
                                <td>可用</td>
                                <td th:text="${monitorInfo.get('diskSpaceFree')}"></td>
                            </tr>
                        </table>
                    </div>
                </div>
            </el-card>
        </el-col>

        <el-col :offset="1" :span="7">
            <el-card>
                <div slot="header">
                    <span>JAVA虚拟机</span>
                </div>
                <div>
                    <el-progress type="circle"
                                 th:attr="percentage=${monitorInfo.get('jvmHeapUsageRate')}"
                                 stroke-width="12"
                                 width="120">
                    </el-progress>
                    <div class="cardContent">
                        <table>
                            <tr>
                                <td>堆内存</td>
                                <td th:text="${monitorInfo.get('jvmHeapTotal')}"></td>
                            </tr>
                            <tr>
                                <td>已用</td>
                                <td th:text="${monitorInfo.get('jvmHeapUsage')}"></td>
                            </tr>
                            <tr>
                                <td>可用</td>
                                <td th:text="${monitorInfo.get('jvmHeapFree')}"></td>
                            </tr>
                            <tr>
                                <td>运行时长</td>
                                <td th:text="${monitorInfo.get('jvmUptime')}"></td>
                            </tr>
                        </table>
                    </div>
                </div>
            </el-card>
        </el-col>
    </el-row>

</div>

<th:block layout:fragment="staticFile">
<script src="/js/operations/appMonitor.js"></script>
</th:block>

</body>
</html>

